<template>
  <el-tabs type="border-card"  v-model="tabName" @tab-click="request">
    <!-- 未注销显示内容 -->
    <el-tab-pane label="未注销" name="uncancelled">
      <SearchAdd :openAddDialog='openAddDialog' :show="0" :flag="0" :cancellation="cancellation" @send-data="search" :allType="allType"></SearchAdd>
      <el-table
        row-key="date"
        ref="filterTable,multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="test"
      >
        <el-table-column type="selection" :width="untableWidth"></el-table-column>
        <el-table-column prop="detailId" label="ID" :width="untableWidth" align="center"></el-table-column>
        <el-table-column prop="detailContent" label="牙科类型介绍内容" :width="untableWidth">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="right" width="530">
              <template #default>
                <div class="set-popper">{{ scope.row.detailContent }}</div>
              </template>
              <template #reference>
                <div class="set-content">
                  {{ scope.row.detailContent }}
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="referencePrice" label="参考价格" align="center" :width="untableWidth"> </el-table-column>
        <el-table-column prop="treatmentProcess" label="治疗过程" :width="untableWidth">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="right" width="530">
              <template #default>
                <div class="set-popper">{{ scope.row.treatmentProcess }}</div>
              </template>
              <template #reference>
                <div class="set-content">
                  {{ scope.row.treatmentProcess }}
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="requirementTypes.typeName" label="类型名字" align="center" :width="untableWidth"> </el-table-column>
        <el-table-column prop="requirementTypes.typeIcon" label="类型图标" show-overflow-tooltip :width="untableWidth"> </el-table-column>
        <el-table-column label="操作" :width="untableWidth">
          <el-button type="primary" @click="openUpdateDialog">修改</el-button>
          <el-button type="danger" @click="cancellation">注销</el-button>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <!-- 已注销显示内容 -->
    <el-tab-pane label="已注销" name="cancelled">
      <SearchAdd :flag="1" @send-data="search" :show="0" :allType="allType"></SearchAdd>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="detailId" label="ID" align="center" :width="tableWidth"></el-table-column>
        <el-table-column prop="detailContent" label="牙科类型介绍内容" :width="tableWidth">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="right" width="530">
              <template #default>
                <div class="set-popper">{{ scope.row.detailContent }}</div>
              </template>
              <template #reference>
                <div class="set-content">
                  {{ scope.row.detailContent }}
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="referencePrice" label="参考价格" align="center" :width="tableWidth"> </el-table-column>
        <el-table-column prop="treatmentProcess" label="治疗过程" :width="tableWidth"> 
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="right" width="530">
              <template #default>
                <div class="set-popper">{{ scope.row.treatmentProcess }}</div>
              </template>
              <template #reference>
                <div class="set-content">
                  {{ scope.row.treatmentProcess }}
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="requirementTypes.typeName" label="类型名字" align="center" :width="tableWidth"> </el-table-column>
        <el-table-column prop="requirementTypes.typeIcon" label="类型图标" show-overflow-tooltip :width="tableWidth"> </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

  <!-- 弹窗 -->
  <el-dialog :title="title" v-model="dialogFormVisible" width="30%">
    <!-- 添加医师信息 -->
    <el-form 
      ref="detail" 
      :model="detail"
      :rules="rules"
      label-width="120px"
      v-if="isShow?true:false"
    >
      <el-form-item label="牙科介绍内容" prop="detailContent">
        <el-input v-model="detail.detailContent"></el-input>
      </el-form-item>
      <el-form-item label="参考价格" prop="referencePrice">
        <el-input v-model.number="detail.referencePrice"></el-input>
      </el-form-item>
      <el-form-item label="治疗过程" prop="treatmentProcess">
        <el-input v-model="detail.treatmentProcess"></el-input>
      </el-form-item>
      <el-form-item label="牙科类型" prop="requirementTypes.typeName">
        <el-input ></el-input>
      </el-form-item>
      <el-form-item label="类型图标" prop="requirementTypes.typeIcon">
        <el-input ></el-input>
      </el-form-item>
    </el-form>
    <!-- 修改信息 -->
    <el-form 
      ref="detail" 
      :model="detail"
      :rules="rules"
      label-width="120px"
      v-if="isShow?false:true"
    >
      <el-form-item label="牙科介绍内容" prop="detailContent">
        <el-input v-model="detail.detailContent"></el-input>
      </el-form-item>
      <el-form-item label="参考价格" prop="referencePrice">
        <el-input v-model.number="detail.referencePrice"></el-input>
      </el-form-item>
      <el-form-item label="治疗过程" prop="treatmentProcess">
        <el-input v-model="detail.treatmentProcess"></el-input>
      </el-form-item>
      <el-form-item label="类型名称" prop="requirementTypes.typeName">
        <el-input ></el-input>
      </el-form-item>
      <el-form-item label="类型图标" prop="requirementTypes.typeIcon">
        <el-input></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel('detail')">取 消</el-button>
        <el-button type="primary" @click="onSubmit('detail')">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import SearchAdd from '@/components/SearchAdd.vue';
import {getAllTypeDetails,addTypeDetail,delTypeDetail} from '@/api/secondary_page/requirementType_manage'
import { ElMessage } from 'element-plus'
export default {
  name:"PageRequirementTypeManage",
   data() {
      return {
        untableWidth:'(calc(100% - 220)/8)',
        tableWidth:'(calc(100% - 220)/6)',
        title:'',
        isShow:false,
        tabName:'uncancelled',
        flag:1,
        dialogFormVisible:false,//弹窗开关
        allType:[],
        tableData: [],
        multipleSelection: [],//多选选中行数据
        detail:{//牙科类型对象
            detailId:'',
            detailContent:'',
            referencePrice:'',
            treatmentProcess:'',
            typeId:'',
            flag:0,
            requirementTypes:{
              typeName:'',
              typeIcon:''
            }
        },
        rules: {//验证规则
          detailContent: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            {
              min: 2,
              message: '长度最少 2 个字符',
              trigger: 'blur',
            },
          ],
           referencePrice: [
            { required: true, message: '价格不能为空'},
            { type: 'number', message: '价格必须为数字值'}
          ],
          treatmentProcess: [
            { required: true, message: '治疗过程不能为空', trigger: 'blur' },
            {
              min: 2,
              message: '长度最少 2 个字符',
              trigger: 'blur',
            },
          ],
         
        }
      }
    },
     methods:{
      //获取类型函数
      getdetails(){
        getAllTypeDetails(this.detail).then(
          response =>{
            console.log(response);
            this.tableData = response;
          }
        )
      },
      //获取文章信息请求处理
      request(tab){
        this.detail ={}
        if(tab.props.name=='uncancelled'){
          this.detail.flag = 0
        }else{
          this.detail.flag = 1
        }
        this.getdetails()
      },
      //多选函数
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      //弹窗开关
      openDialog(){
        this.dialogFormVisible = !this.dialogFormVisible
      },
      //打开添加弹窗
      openAddDialog() {
        this.openDialog()
        this.isShow = true
        this.title = '添加就诊人信息'
      },
      //打开修改弹窗
      openUpdateDialog() {
        this.openDialog()
        this.isShow = false
        this.title = '修改就诊人信息'
      },
      //获取el-table选中行数据
      test(row){
        this.detail = row
          if(this.multipleSelection.length == 0){
            this.multipleSelection.push(row)
          }else{
            this.multipleSelection.forEach((item)=>{
              if(item.detailId != row.detailId){
                this.multipleSelection.push(row)
              }
            })
          }
      },
      //弹窗取消函数
      cancel(formName){
        this.openDialog();
        this.$refs[formName].resetFields()
        ElMessage('操作已取消')
        this.detail = {}
        this.detail.flag=0
        this.getdetails()
      },
      //提交函数
      onSubmit(formName) {
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            addTypeDetail(this.detail).then(
              response=>{
                if(response == 0){
                  ElMessage.error('添加失败')
                }else if(response == 1){
                  ElMessage.success({
                    message: '添加成功',
                    type: 'success',
                  })
                }
              }
            )
            this.openDialog();
            this.$refs[formName].resetFields()
          } else {
            ElMessage.error('验证未能通过或信息未填写完整')
            return false
          }
        })
      },
      //注销函数
     cancellation() {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.multipleSelection.forEach((item)=>{
            this.detail={}
            this.detail.detailId=item.detailId
            this.detail.typeId=item.typeId
            delTypeDetail(this.detail).then(
              response => {
                if(response == "删除成功"){
                  this.$message({
                    type: 'success',
                    message: '删除成功!',
                  })
                    this.detail = {}
                    this.detail.flag = 0
                    this.getdetails();
                }else{
                    ElMessage.error('删除失败')
                }
              }
            )
          })
          this.multipleSelection = []
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      },
      filterHandler(value, row, column) {
        const property = column['property']
        return row[property] === value
      },
      //搜索函数
      search(input,type,o){
        console.log(input+'----'+type+'----'+o)
        if(o){
          if(isNaN(input)){
            this.detail.detailContent = input
            this.detail.referencePrice = input
          }else{
            this.detail.detailId = input
          }
          this.getdetails()
        }else{
          this.detail.requirementTypes = {}
          this.detail.requirementTypes.typeName = type
          console.log(this.detail)
          this.getdetails()
        }
      },
    },
    mounted(){
      this.detail = {}
      this.detail.flag = 0
      this.getdetails();
      
    },
    components:{
      SearchAdd,
    }
}
</script>

<style scoped>
.set-popper {
  width:500px;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>